<template>
  <div id="app" :class="obj">
    <router-view />
  </div>
</template>

<script>
// 定义三个主题 one  two  three 三个主题
export default {
  name: 'App',
  data() {
    return {
      // obj: {
      //   three: true
      // }
    }
  },
  computed: {
    obj() {
      let themeClass = ''
      // one 主题类名
      if (this.$store.state.settings.theme === '#409EFF') {
        themeClass = 'one'
      }
      // two 主题 类名
      if (this.$store.state.settings.theme === '#1890FF') {
        themeClass = 'two'
      }
      // three 主题类名
      if (this.$store.state.settings.theme === '#304156') {
        themeClass = 'three'
      }
      // es6的语法, 对象的键 加了 []  []中的值是一个变量
      return { [themeClass]: true }
    }
  }
}
</script>
